<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        *{padding:0;margin:0;}
        a{text-decoration: none;color: #0C0C0C;}
        html{width:100vw;height: 100vh;font-size: 14px; /*给后面的rem用*/}
        body{min-width: 360px;background-color: #a9eff5;}
        /*display: flex;justify-content: center;margin: auto 0;*/
        .login{
            background-color: white;
            width: 50vh;
            height: 43vh;
            margin: 25vh auto;
        }
        .login-title{
            padding-top: 3rem;
            padding-bottom: 3rem;
            display: flex;
            justify-content: center;
        }
        .login-title > span{
            font-size: 2rem;
            font-weight:bold;
        }
        button{
            padding-bottom: 2px;
        }
    </style>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <title>后台登录</title>
</head>
<body>
    <div class="login">

        <div class="login-title">
            <span>后台登录</span>
        </div>

        <form class="layui-form" action="" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input type="text" name="account" required style="width: 300px;"  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required style="width: 300px;" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" name="code" required lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <img id="captcha" src="/admin/login/createCode"  alt="" onclick="reload_captcha()">
                </div>
            </div>
            {{ csrf_field() }}
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formLogin">立即登录</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script src="/layui/layui.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    //Demo
    layui.use(['layer','form'], function(){
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;

        //监听提交
        form.on('submit(formLogin)', function(data){
            $.post('/admin/login/executeLogin',data.field,function(res){
               console.log(res);
                return false;
            },'json');
            return false;
        });
    });
</script>
<script>
    function reload_captcha(){
        $('#captcha').attr('src','/admin/login/createCode?rand='+Math.random());
    }
</script>
</html>